<template>
  <section id="node" ref="node">
    <section class="btn-list" ref="btnList">
      <a-button @click="visibleAddNode=true">
        <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g id="Frame">
            <path id="Vector" d="M16 0H0V16H16V0Z" fill="white" fill-opacity="0.01"/>
            <path id="Vector_2"
                  d="M8.00016 14.6666C11.6821 14.6666 14.6668 11.6818 14.6668 7.99992C14.6668 4.31802 11.6821 1.33325 8.00016 1.33325C4.31826 1.33325 1.3335 4.31802 1.3335 7.99992C1.3335 11.6818 4.31826 14.6666 8.00016 14.6666Z"
                  stroke="#98A6AD" stroke-linejoin="round"/>
            <path id="Vector_3" d="M8 5.33325V10.6666" stroke="#98A6AD" stroke-linecap="round" stroke-linejoin="round"/>
            <path id="Vector_4" d="M5.3335 8H10.6668" stroke="#98A6AD" stroke-linecap="round" stroke-linejoin="round"/>
          </g>
        </svg>
        <p>添加路由</p>
      </a-button>
      <a-button @click="handleStopNode">
        <svg t="1643115754299" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="1643" width="20" height="20" style="transform: rotate(90deg)">
          <path d="M791.04 170.666667L853.333333 228.906667 275.626667 853.333333 213.333333 795.093333z" p-id="1644"
                fill="#98A6AD"></path>
          <path
              d="M512 981.333333C252.8 981.333333 42.666667 771.2 42.666667 512S252.8 42.666667 512 42.666667s469.333333 210.133333 469.333333 469.333333-210.133333 469.333333-469.333333 469.333333z m0-85.333333a384 384 0 1 0 0-768 384 384 0 0 0 0 768z"
              p-id="1645" fill="#98A6AD"></path>
        </svg>
        <p>停用路由</p>
      </a-button>
      <a-button @click="handleDelNode">
        <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g id="Frame">
            <path id="Vector"
                  d="M7.99967 14.6666C11.6816 14.6666 14.6663 11.6818 14.6663 7.99992C14.6663 4.31802 11.6816 1.33325 7.99967 1.33325C4.31777 1.33325 1.33301 4.31802 1.33301 7.99992C1.33301 11.6818 4.31777 14.6666 7.99967 14.6666Z"
                  stroke="#98A6AD" stroke-linejoin="round"/>
            <path id="Vector_2" d="M9.88549 6.11426L6.11426 9.88549" stroke="#98A6AD" stroke-linecap="round"
                  stroke-linejoin="round"/>
            <path id="Vector_3" d="M6.11426 6.11426L9.88549 9.88549" stroke="#98A6AD" stroke-linecap="round"
                  stroke-linejoin="round"/>
          </g>
        </svg>
        <p>删除路由</p>
      </a-button>
    </section>
    <section class="node-list">
      <a-table
          :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange}"
          :data-source="nodeArr"
          :loading="isLoading"
          :pagination="false"
          :scroll="{ y: 640 }"
          :rowKey="(record, index) => record.id"
          :class="isEmpty ? '' :'node-empty'"
      >
        <a-table-column key="id" title="权限ID" data-index="create_time" align="center" width="100px">
          <template #default="{ record }">
            <span>{{ record.id }}</span>
          </template>
        </a-table-column>
        <a-table-column key="route_name" title="权限名称" data-index="create_time" align="center">
          <template #default="{ record }">
            <span>{{ record.route_name }}</span>
          </template>
        </a-table-column>
        <a-table-column key="route_url" title="路由地址" data-index="create_time" align="center" width="500px">
          <template #default="{ record }">
            <span>{{ record.route_url }}</span>
          </template>
        </a-table-column>
        <a-table-column key="route_method" title="请求方式" data-index="route" align="center">
          <template #default="{ record }">
            <span>{{ record.route_method }}</span>
          </template>
        </a-table-column>
        <a-table-column key="status" title="请求状态" data-index="name" align="center">
          <template #default="{ record }">
            <span v-if="record.status == 1">
              <a-tag color="blue">开启</a-tag>
            </span>
            <span v-else>
               <a-tag color="red">关闭</a-tag>
            </span>
          </template>
        </a-table-column>
        <a-table-column key="operation" title="操作" data-index="operation" align="center">
          <template #default="{ record }">
            <section class="operation" ref="operation">
              <a-button type="primary" @click="handleEditNode(record)">编辑</a-button>
              <a-button type="primary" danger @click="handleDeleteNode(record)">删除</a-button>
            </section>
          </template>
        </a-table-column>
      </a-table>
    </section>

    <!--批量禁用节点-->
    <a-modal v-model:visible="visibleStopNode" :footer="null" :getContainer="$refs.node" width="374px">
      <section style="text-align: center">
        <h2 class="modal-title">是否确认批量禁用这些节点</h2>
        <p class="modal-content">点击确认后，不得撤销此操作</p>
      </section>
      <section class="modal-button">
        <a-button type="primary" @click="visibleStopNode=false">取消</a-button>
        <a-button type="primary" @click="handleConfirmStopNode" :loading="editLoad">确定</a-button>
      </section>
    </a-modal>
    <!--批量删除节点-->
    <a-modal v-model:visible="visibleDelNode" :footer="null" :getContainer="$refs.node" width="374px">
      <section style="text-align: center">
        <h2 class="modal-title">是否确认批量删除这些节点</h2>
        <p class="modal-content">点击确认后，不得撤销此操作</p>
      </section>
      <section class="modal-button">
        <a-button type="primary" @click="visibleDelNode=false">取消</a-button>
        <a-button type="primary" @click="handleConfirmDeleteNode" :loading="editLoad">确定</a-button>
      </section>
    </a-modal>
    <!--添加节点-->
    <a-modal v-model:visible="visibleAddNode" :footer="null" :getContainer="$refs.node" class="edit-model"
             :closable="false" :onCancel="handleCancelAddNode">
      <section class="edit-header">
        <h1>添加路由权限</h1>
        <h2>add routing permissions</h2>
      </section>
      <section class="edit-body">
        <a-input v-model:value="add.name" placeholder="权限名称"/>
        <a-input v-model:value="add.router" placeholder="路由地址"/>
        <a-select
            v-model:value="add.method"
            label-in-value
            style="width: 268px"
            :options="methodArr"
            placeholder="请求方式"
        >
        </a-select>
      </section>
      <section class="edit-footer">
        <a-button @click="handleCancelAddNode">取消</a-button>
        <a-button @click="handleAddNode" :loading="editLoad">添加</a-button>
      </section>
    </a-modal>
    <!--编辑节点-->
    <a-modal v-model:visible="visibleEditNode" :footer="null" :getContainer="$refs.node" class="edit-model"
             :closable="false">
      <section class="edit-header">
        <h1>编辑路由权限</h1>
        <h2>Edit routing permissions</h2>
      </section>
      <section class="edit-body">
        <a-input v-model:value="edit.name" placeholder="权限名称"/>
        <a-input v-model:value="edit.router" placeholder="路由地址"/>
        <a-select
            v-model:value="edit.method"
            label-in-value
            style="width: 268px"
            :options="methodArr"
            placeholder="请求方式"
        >
        </a-select>
        <a-select
            v-model:value="edit.status"
            label-in-value
            style="width: 268px"
            :options="statusArr"
            placeholder="请求状态"
        >
        </a-select>
      </section>
      <section class="edit-footer">
        <a-button @click="visibleEditNode=false">取消</a-button>
        <a-button @click="handleKeepNode" :loading="editLoad">保存</a-button>
      </section>
    </a-modal>
    <!--删除节点-->
    <a-modal v-model:visible="visibleDeleteNode" :footer="null" :getContainer="$refs.node" width="374px">
      <section style="text-align: center">
        <h2 class="modal-title">是否确认删除此节点</h2>
        <p class="modal-content">点击确认后，不得撤销此操作</p>
      </section>
      <section class="modal-button">
        <a-button type="primary" @click="visibleDeleteNode=false">取消</a-button>
        <a-button type="primary" @click="handleConfirmDelNode" :loading="editLoad">确定</a-button>
      </section>
    </a-modal>
  </section>
</template>
<script>
import {defineComponent, getCurrentInstance, ref, onMounted, reactive, computed, toRefs} from 'vue'
import {message} from "ant-design-vue";

export default defineComponent({
  name: "index",
  setup() {
    const {proxy} = getCurrentInstance()
    let nodeArr = ref([]);
    let isLoading = ref(true)
    let isEmpty = ref(false)
    let editLoad = ref(false)
    let visibleEditNode = ref(false)
    let visibleDeleteNode = ref(false)
    let visibleAddNode = ref(false)
    let visibleStopNode = ref(false)
    let visibleDelNode = ref(false)
    let delId = ref('')
    let statusArr = ref([
      {value: 0, label: "关闭"},
      {value: 1, label: "开启"}
    ])
    let methodArr = ref([
      {value: 'get', label: "get"},
      {value: 'post', label: "post"},
      {value: 'put', label: "put"},
      {value: 'delete', label: "delete"},
    ])
    let edit = reactive({
      id: '',
      name: '',
      router: '',
      method: '',
      status: ''
    })
    let add = reactive({
      router: '',
      name: '',
      method: {value: '', label: '请求方式'}
    })
    const state = reactive({
      selectedRowKeys: [],
      loading: false,
    });
    const hasSelected = computed(() => state.selectedRowKeys.length > 0);
    const onSelectChange = selectedRowKeys => {
      state.selectedRowKeys = selectedRowKeys;
    };

    const handleAddNode = () => {
      switch (true) {
        case add.name == '':
          message.warn("请输入权限名称")
          break;
        case add.router == '':
          message.warn("请输入路由地址")
          break;
        case add.method.value == '':
          message.warn("请选择请求方式")
          break;
        default :
          editLoad.value = true
          proxy.$request(proxy.$getRoute(62).route_method, proxy.$getRoute(62).route_url, {
            name: add.name,
            url: add.router,
            method: add.method.value,
          }).then(res => {
            editLoad.value = false
            visibleAddNode.value = false
            add.router = ""
            add.name = ""
            add.method = {value: '', label: '请求方式'}
            nodeArr.value = []
            isLoading.value = true
            proxy.$request(proxy.$getRoute(58).route_method, proxy.$getRoute(58).route_url, {}).then(res => {
              nodeArr.value = res.data
              isLoading.value = false
              message.success("添加成功")
            })
          })
      }
    }
    const handleCancelAddNode = () => {
      visibleAddNode.value = false
      add.router = ""
      add.name = ""
      add.method = {value: '', label: '请求方式'}
    }
    const handleEditNode = (record) => {
      visibleEditNode.value = true
      edit.id = record.id
      edit.name = record.route_name
      edit.router = record.route_url
      edit.method = {
        value: record.route_method,
        label: record.route_method,
      }
      if (record.status == 1) {
        edit.status = {
          value: record.status,
          label: '开启'
        }
      } else {
        edit.status = {
          value: record.status,
          label: '关闭'
        }
      }
    }
    const handleKeepNode = () => {
      editLoad.value = true
      proxy.$request(proxy.$getRoute(59).route_method, proxy.$getRoute(59).route_url, {
            route_name: edit.name,
            route_url: edit.router,
            id: edit.id,
            route_method: edit.method.value,
            status: edit.status.value
          }
      ).then(res => {
        editLoad.value = false
        visibleEditNode.value = false
        nodeArr.value = []
        isLoading.value = true
        proxy.$request(proxy.$getRoute(58).route_method, proxy.$getRoute(58).route_url, {}).then(res => {
          nodeArr.value = res.data
          isLoading.value = false
          message.success("保存成功")
        })
      })
    }
    const handleDeleteNode = (record) => {
      delId.value = record.id
      visibleDeleteNode.value = true
    }
    const handleConfirmDelNode = () => {
      editLoad.value = true
      proxy.$request(proxy.$getRoute(61).route_method, proxy.$getRoute(61).route_url, {
        id: delId.value
      }).then(res => {
        editLoad.value = false
        visibleDeleteNode.value = false
        delId.value = ''
        nodeArr.value = []
        isLoading.value = true
        proxy.$request(proxy.$getRoute(58).route_method, proxy.$getRoute(58).route_url, {}).then(res => {
          nodeArr.value = res.data
          isLoading.value = false
          message.success("删除成功")
        })
      })
    }
    const handleStopNode = () => {
      if (state.selectedRowKeys.length) {
        visibleStopNode.value = true
      } else {
        message.warn("请选择要停用的路由")
      }
    }
    const handleConfirmStopNode = () => {
      editLoad.value = true
      let stopId = ''
      state.selectedRowKeys.forEach(x => {
        stopId += x + ","
      })
      proxy.$request(proxy.$getRoute(68).route_method, proxy.$getRoute(68).route_url, {
        id: stopId.slice(0, -1)
      }).then(res => {
        editLoad.value = false
        nodeArr.value = []
        isLoading.value = true
        visibleStopNode.value = false
        proxy.$request(proxy.$getRoute(58).route_method, proxy.$getRoute(58).route_url, {}).then(res => {
          nodeArr.value = res.data
          isLoading.value = false
          message.success("批量禁用节点成功")
        })
      })
    }
    const handleDelNode = () => {
      if (state.selectedRowKeys.length) {
        visibleDelNode.value = true
      } else {
        message.warn("请选择要删除的路由")
      }
    }
    const handleConfirmDeleteNode = () => {
      editLoad.value = true
      let delId = ''
      state.selectedRowKeys.forEach(x => {
        delId += x + ","
      })
      proxy.$request(proxy.$getRoute(69).route_method, proxy.$getRoute(69).route_url, {
        id: delId.slice(0, -1)
      }).then(res => {
        editLoad.value = false
        nodeArr.value = []
        isLoading.value = true
        visibleDelNode.value = false
        proxy.$request(proxy.$getRoute(58).route_method, proxy.$getRoute(58).route_url, {}).then(res => {
          nodeArr.value = res.data
          isLoading.value = false
          message.success("批量删除节点成功")
        })
      })
    }

    onMounted(() => {
      proxy.$request(proxy.$getRoute(58).route_method, proxy.$getRoute(58).route_url, {}).then(res => {
        nodeArr.value = res.data
        isLoading.value = false
      })
    })

    return {
      hasSelected,
      ...toRefs(state),
      onSelectChange,
      nodeArr,
      isLoading,
      isEmpty,
      editLoad,
      visibleEditNode,
      visibleDeleteNode,
      visibleAddNode,
      visibleStopNode,
      visibleDelNode,
      edit,
      add,
      methodArr,
      statusArr,
      handleEditNode,
      handleKeepNode,
      handleDeleteNode,
      handleConfirmDelNode,
      handleCancelAddNode,
      handleAddNode,
      handleStopNode,
      handleConfirmStopNode,
      handleDelNode,
      handleConfirmDeleteNode,
    }
  }
})
</script>

<style lang="less">
@selectColor: #6777EF;
#node {
  .btn-list {
    display: flex;
    gap: 16px;
    margin-bottom: 18px;
  }

  .btn-list > button {
    display: flex;
    align-items: center;
    height: 52px;
    border-radius: 6px;
    border: none;
    background: #fff;
    box-shadow: none;
  }


  .btn-list > button:nth-child(3) a {
    display: flex;
    align-items: center;
  }

  .btn-list > button p {
    margin: 0 0 0 4px;
    font-size: 14px;
    font-weight: 400;
    color: #98A6AD;
    line-height: 20px;
    letter-spacing: 0.5px;
  }

  .modal-button {
    justify-content: space-between;
  }

  .modal-button button {
    height: 36px;
    padding: 7px 18px;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    line-height: 22px;
    border: none;
    border-radius: 6px;
    width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    color: #fff;
  }

  .modal-button button:first-child {
    background: @selectColor;
  }

  .modal-button button:last-child {
    background: #EB5757;
  }

  .ant-table-thead > tr > th, .ant-table-header {
    font-size: 16px;
    font-weight: 400;
    color: #98A6AD;
    line-height: 19px;
    background: #fff !important;
  }

  .ant-table-tbody > tr > td {
    border: none;
  }

  .ant-table-body {
    overflow-y: auto !important;
  }

  .ant-table {
    font-size: 16px;
    font-weight: 400;
    color: #262626;
    line-height: 19px;
    white-space: nowrap;
  }

  .ant-table-row-cell-break-word {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .loading {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
  }

  .operation {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }

  .operation button, .btn-list .ant-modal-body button {
    width: 74px;
    height: 36px;
    border-radius: 8px;
    font-size: 13px;
    letter-spacing: 0;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 15px;
  }

  .operation button:first-child, .btn-list .ant-modal-body button:first-child {
    background: #6777EF;
  }

  .operation > button:last-child, .btn-list .ant-modal-body button:last-child {
    background: #EB5757;
  }

  .edit-model {
    width: 332px !important;
    height: 420px;
    box-sizing: border-box;
  }

  .edit-model .ant-modal-body > section {
    width: 100%;
  }

  .edit-model .edit-header h1 {
    font-size: 32px;
    font-weight: bold;
    color: #000000;
    line-height: 38px;
    text-align: center;
    margin-bottom: 2px;
  }

  .edit-model .edit-header h2 {
    font-size: 14px;
    font-weight: bold;
    color: #D9D9D9;
    line-height: 14px;
    text-transform: uppercase;
    text-align: center;
  }

  .edit-model .edit-body {
    margin-top: 20px;
    height: 250px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
  }

  .edit-model .edit-body input,
  .edit-model .edit-body .ant-select-selector {
    width: 268px;
    height: 40px;
    background: rgba(207, 207, 207, 0.1);
    border-radius: 6px 6px 6px 6px;
  }

  .edit-model .ant-select-selection-item {
    text-align: left;
    line-height: 38px;
  }

  .edit-model .edit-footer {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
  }

  .edit-model .edit-footer button {
    height: 36px;
    padding: 7px 18px;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 22px;
    border: none;
    border-radius: 6px;
  }

  .edit-model .edit-footer button:first-child {
    background: #F2F3F5;
    color: #000;
  }

  .edit-model .edit-footer button:last-child {
    background: #6777EF;
    color: #fff;
  }

  .node-empty .ant-empty {
    display: none !important;
  }

  .node-empty .ant-table-placeholder {
    height: 100px;
  }

  .ant-table-body::-webkit-scrollbar {
    width: 10px;
  }

  //修改 滚动条的 下面 的 样式
  .ant-table-body::-webkit-scrollbar-track {
    background-color: transparent;
  }

  //修改 滑块
  .ant-table-body::-webkit-scrollbar-thumb {
    width: 5px !important;
    background-color: #bbbdbf;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }

  .ant-input::-webkit-outer-spin-button,
  .ant-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }
}
</style>
